/*
* @Date: 2021/1/17
* @Author: XueChengwu <xuechengwu@erayt.com>
* @Copyright: 2015-2019 Erayt, Inc.
* @Description: If you have some questions, please contact: xuechengwu@erayt.com.
*/
import React from 'react';
import './index.scss';
import { Collapse, Form, Input, Select, InputNumber, Slider } from 'antd';
const { Panel } = Collapse;
import Case from './Case';
import Icon from 'components/Icon';
import Position from './Position';
import BackgroundPosition from './BackgroundPosition';
import Border from './Border';

export default class extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      display: '',
      flexDirection: '',
      justifyContent: '',
      alignItems: '',
      flexWrap: '',
      fontWeight: '',
      fontSize: '',
      textAlign: '',
      verticalAlign: '',
      clear: 'none',
      float: 'none',
      backgroundType: '',
      backgroundSize: '',
      backgroundRepeat: '',
      borderType: '',
      borderRadius: 0,
      borderTopLeftRadius: 0,
      borderTopRightRadius: 0,
      borderBottomLeftRadius: 0,
      borderBottomRightRadius: 0,
    }
  }

  onDisplayChange = (e) => {
    const { display } = e.currentTarget.dataset;
    const { onStyleChange, uid, component } = this.props;
    this.setState({
      display
    }, () => {
      onStyleChange && onStyleChange({
        key: 'display',
        value: display,
        uid,
        component,
      });
    });
  }

  onDirectionChange = (e) => {
    const { direction } = e.currentTarget.dataset;
    const { onStyleChange, uid, component } = this.props;
    this.setState({
      flexDirection: direction,
    }, () => {
      onStyleChange && onStyleChange({
        key: 'flex-direction',
        value: direction,
        uid,
        component,
      });
    });
  }

  onJustifyChange = (e) => {
    const { justify } = e.currentTarget.dataset;
    const { onStyleChange, uid, component } = this.props;
    this.setState({
      justifyContent: justify,
    }, () => {
      onStyleChange && onStyleChange({
        key: 'justify-content',
        value: justify,
        uid,
        component,
      });
    });
  }

  onAlignChange = (e) => {
    const { align } = e.currentTarget.dataset;
    const { onStyleChange, uid, component } = this.props;
    this.setState({
      alignItems: align,
    }, () => {
      onStyleChange && onStyleChange({
        key: 'align-items',
        value: align,
        uid,
        component,
      });
    });
  }

  onWrapChange = (e) => {
    const { wrap } = e.currentTarget.dataset;
    const { onStyleChange, uid, component } = this.props;
    this.setState({
      flexWrap: wrap,
    }, () => {
      onStyleChange && onStyleChange({
        key: 'flex-wrap',
        value: wrap,
        uid,
        component,
      });
    });
  }

  onFontWeightChange = (value) => {
    const { onStyleChange, uid, component }= this.props;
    this.setState({
      fontWeight: value,
    }, () => {
      onStyleChange && onStyleChange({
        key: 'font-weight',
        value,
        uid,
        component,
      });
    })
  }

  onFontSizeChange = (value) => {
    const { onStyleChange, uid, component } = this.props;
    this.setState({
      fontSize: value,
    }, () => {
      onStyleChange && onStyleChange({
        key: 'font-size',
        value,
        uid,
        component,
      });
    });
  }

  onTextAlignChange = (e) => {
    const { textAlign } = e.currentTarget.dataset;
    const { onStyleChange, uid, component } = this.props;
    this.setState({
      textAlign,
    }, () => {
      onStyleChange && onStyleChange({
        key: 'text-align',
        value: textAlign,
        uid,
        component,
      });
    });
  }

  onVerticalAlignChange = (e) => {
    const { verticalAlign } = e.currentTarget.dataset;
    const { onStyleChange, uid, component } = this.props;
    this.setState({
      verticalAlign,
    }, () => {
      onStyleChange && onStyleChange({
        key: 'vertical-align',
        value: verticalAlign,
        uid,
        component,
      });
    });
  }

  onClearChange = (e) => {
    const { clear } = e.currentTarget.dataset;
    const { onStyleChange, uid, component } = this.props;
    this.setState({
      clear,
    }, () => {
      onStyleChange && onStyleChange({
        key: 'clear',
        value: clear,
        uid,
        component,
      });
    });
  }

  onFloatChange = (e) => {
    const { float } = e.currentTarget.dataset;
    const { onStyleChange, uid, component } = this.props;
    this.setState({
      float,
    }, () => {
      onStyleChange && onStyleChange({ key: 'float', value: float, uid, component });
    });
  }

  onBackgroundChange = (e) => {
    const { backgroundType } = e.currentTarget.dataset;
    this.setState({
      backgroundType,
    });
  }

  onBackgroundSizeChange = (e) => {
    const { backgroundSize } = e.currentTarget.dataset;
    const { onStyleChange } = this.props;
    this.setState({
      backgroundSize,
    }, () => {
      onStyleChange && onStyleChange('background-size', backgroundSize);
    });
  }

  onBackgroundRepeatChange = (e) => {
    const { backgroundRepeat } = e.currentTarget.dataset;
    const { onStyleChange, uid, component } = this.props;
    this.setState({
      backgroundRepeat,
    }, () => {
      onStyleChange && onStyleChange({
        key: 'background-repeat',
        value: backgroundRepeat,
        uid,
        component,
      });
    });
  }

  onBorderRadiusChange = (borderRadius) => {
    const { onStyleChange, uid, component } = this.props;
    this.setState({
      borderRadius,
    }, () => {
      onStyleChange && onStyleChange({
        key: 'border-radius',
        value: borderRadius,
        uid,
        component,
      });
    });
  }

  onBorderTypeChange = (e) => {
    const { borderType } = e.currentTarget.dataset;
    this.setState({
      borderType,
    });
  }

  onBeBorderRadiusChange = (prop, value) => {
    const { onStyleChange, uid, component } = this.props;
    this.setState({
      [prop]: value,
    }, () => {
      onStyleChange && onStyleChange({
        key: prop.replace(/([A-Z])/g,'-$1').toLowerCase(),
        value: Number(value),
        uid,
        component,
      });
    });
  }

  onWidthChange = (e) => {
    const { value } = e.currentTarget;
    const { onStyleChange, uid, component } = this.props;
    onStyleChange && onStyleChange({
      key: 'width',
      value: Number(value),
      uid,
      component,
    });
  }

  onHeightChange = (e) => {
    const { value } = e.currentTarget;
    const { onStyleChange, uid, component } = this.props;
    onStyleChange && onStyleChange({
      key: 'height',
      value,
      uid,
      component,
    });
  }

  onBoxChange = (value, type) => {

  }

  render() {
    const {
      display = '', flexDirection = '', justifyContent = '',
      alignItems = '', flexWrap = '', fontWeight = '', fontSize = '',
      textAlign = '', verticalAlign = '', clear = 'none', float = 'none',
      backgroundType = '', backgroundSize = '', backgroundRepeat = '',
      borderType = '', borderRadius = 0, borderTopLeftRadius = 0,
      borderTopRightRadius = 0, borderBottomLeftRadius = 0,
      borderBottomRightRadius = 0,
    } = this.state;
    return (
      <div className="style-form-box" >
        <Collapse defaultActiveKey={['layout', 'font', 'position', 'background', 'border']}>
          <Panel header="布局" key="layout">
            <Form.Item
              label="布局模式"
            >
              <div className="layout-display-box">
                <div
                  className={`layout-display-item ${display === 'inline' && 'active'}`}
                  title="内联布局inline"
                  data-display="inline"
                  onClick={this.onDisplayChange}
                >
                  <Icon type="danxingshensuo" />
                </div>
                <div
                  className={`layout-display-item ${display === 'flex' && 'active'}`}
                  title="弹性布局flex"
                  data-display="flex"
                  onClick={this.onDisplayChange}
                >
                  <Icon type="chuanlie" />
                </div>
                <div
                  className={`layout-display-item ${display === 'block' && 'active'}`}
                  title="块级布局block"
                  data-display="block"
                  onClick={this.onDisplayChange}
                >
                  <Icon type="bankuai"/>
                </div>
                <div
                  className={`layout-display-item ${display === 'inline-block' && 'active'}`}
                  title="内联块级布局inline-block"
                  data-display="inline-block"
                  onClick={this.onDisplayChange}
                >
                  <Icon type="fangkuai-"/>
                </div>
                <div
                  className={`layout-display-item ${display === 'none' && 'active'}`}
                  title="隐藏none"
                  data-display="none"
                  onClick={this.onDisplayChange}
                >
                  <Icon type="yincang" />
                </div>
              </div>
            </Form.Item>
            {
              display === 'flex' && (
                <React.Fragment>
                  <Form.Item
                    label="主轴方向"
                  >
                    <div className="layout-flex-direction">
                      <div
                        data-direction="row"
                        className={`layout-flex-direction-item ${flexDirection === 'row' && 'active'}`}
                        onClick={this.onDirectionChange}
                      >
                        水平
                      </div>
                      <div
                        data-direction="row-reverse"
                        className={`layout-flex-direction-item ${flexDirection === 'row-reverse' && 'active'}`}
                        onClick={this.onDirectionChange}
                      >
                        逆水平
                      </div>
                      <div
                        data-direction="column"
                        className={`layout-flex-direction-item ${flexDirection === 'column' && 'active'}`}
                        onClick={this.onDirectionChange}
                      >
                        垂直
                      </div>
                      <div
                        data-direction="column-reverse"
                        className={`layout-flex-direction-item ${flexDirection === 'column-reverse' && 'active'}`}
                        onClick={this.onDirectionChange}
                      >
                        逆垂直
                      </div>
                    </div>
                  </Form.Item>
                  <Form.Item
                    label="主轴对齐"
                  >
                    <div className="layout-flex-justify">
                      <div
                        data-justify="flex-start"
                        title="flex-start"
                        className={`layout-flex-justify-item ${justifyContent === 'flex-start' && 'active'}`}
                        onClick={this.onJustifyChange}
                      >
                        <Icon type="zuoduiqi" />
                      </div>
                      <div
                        data-justify="flex-end"
                        title="flex-end"
                        className={`layout-flex-justify-item ${justifyContent === 'flex-end' && 'active'}`}
                        onClick={this.onJustifyChange}
                      >
                        <Icon type="youduiqi" />
                      </div>
                      <div
                        data-justify="center"
                        title="center"
                        className={`layout-flex-justify-item ${justifyContent === 'center' && 'active'}`}
                        onClick={this.onJustifyChange}
                      >
                        <Icon type="shuipingjuzhong" />
                      </div>
                      <div
                        data-justify="space-between"
                        title="space-between"
                        className={`layout-flex-justify-item ${justifyContent === 'space-between' && 'active'}`}
                        onClick={this.onJustifyChange}
                      >
                        <Icon type="liangduanduiqi2" />
                      </div>
                      <div
                        data-justify="space-around"
                        title="space-around"
                        className={`layout-flex-justify-item ${justifyContent === 'space-around' && 'active'}`}
                        onClick={this.onJustifyChange}
                      >
                        <Icon type="size-stretch-o" />
                      </div>
                    </div>
                  </Form.Item>
                  <Form.Item
                    label="辅轴对齐"
                  >
                    <div className="layout-flex-justify">
                      <div
                        data-align="flex-start"
                        title="flex-start"
                        className={`layout-flex-justify-item ${alignItems === 'flex-start' && 'active'}`}
                        onClick={this.onAlignChange}
                      >
                        <Icon type="align-top"/>
                      </div>
                      <div
                        data-align="flex-end"
                        title="flex-end"
                        className={`layout-flex-justify-item ${alignItems === 'flex-end' && 'active'}`}
                        onClick={this.onAlignChange}
                      >
                        <Icon type="align-bottom"/>
                      </div>
                      <div
                        data-align="center"
                        title="center"
                        className={`layout-flex-justify-item ${alignItems === 'center' && 'active'}`}
                        onClick={this.onAlignChange}
                      >
                        <Icon type="shuipingjuzhongduiqi"/>
                      </div>
                      <div
                        data-align="baseline"
                        title="baseline"
                        className={`layout-flex-justify-item ${alignItems === 'baseline' && 'active'}`}
                        onClick={this.onAlignChange}
                      >
                        <Icon type="shuipingjuzhong"/>
                      </div>
                      <div
                        data-align="stretch"
                        title="stretch"
                        className={`layout-flex-justify-item ${alignItems === 'stretch' && 'active'}`}
                        onClick={this.onAlignChange}
                      >
                        <Icon type="size-stretch-o"/>
                      </div>
                    </div>
                  </Form.Item>
                  <Form.Item
                    label={<React.Fragment>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;换行</React.Fragment>}
                  >
                    <div className="layout-flex-direction">
                      <div
                        data-wrap="nowrap"
                        className={`layout-flex-direction-item ${flexWrap === 'nowrap' && 'active'}`}
                        onClick={this.onWrapChange}
                      >
                        不换行
                      </div>
                      <div
                        data-wrap="wrap"
                        className={`layout-flex-direction-item ${flexWrap === 'wrap' && 'active'}`}
                        onClick={this.onWrapChange}
                      >
                        换行
                      </div>
                      <div
                        data-wrap="wrap-reverse"
                        className={`layout-flex-direction-item ${flexWrap === 'wrap-reverse' && 'active'}`}
                        onClick={this.onWrapChange}
                      >
                        逆换行
                      </div>
                    </div>
                  </Form.Item>
                </React.Fragment>
              )
            }
            <div className="style-case-box">
              <Case onChange={this.onBoxChange} />
            </div>
            <div className="style-size">
              <div className="style-size-width">
                <label>宽 &nbsp;&nbsp;</label>
                <Input placeholder="宽" onChange={this.onWidthChange} />
              </div>
              <div className="style-size-height">
                <label>高 &nbsp;&nbsp;</label>
                <Input placeholder="高" onChange={this.onHeightChange}/>
              </div>
            </div>
          </Panel>
          <Panel header="文字" key="font">
            <Form.Item
              label={<React.Fragment>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;字符</React.Fragment>}
            >
              <div
                className="flex-form flex-row"
              >
                <div className="flex-col-5">
                  <Select
                    allowClear
                    placeholder="粗细"
                    value={fontWeight}
                    onChange={this.onFontWeightChange}
                  >
                    <Select.Option value="bold">粗体</Select.Option>
                    <Select.Option value="bolder">更粗</Select.Option>
                    <Select.Option value="bolder">更细</Select.Option>
                  </Select>
                </div>
                <div className="flex-col-5">
                  <label>字号</label>
                  <InputNumber
                    value={fontSize}
                    onChange={this.onFontSizeChange}
                  />
                </div>
              </div>
              <div className="flex-form flex-row" style={{marginTop: 8}}>
                <div className="flex-col-5">
                  <input type="color" className="color-box" />
                  &nbsp;&nbsp;颜色值
                </div>
                <div className="flex-col-5">
                  <label>行距</label>
                  <input type="text" className="style-input"/>
                  <span className="style-unit">px</span>
                </div>
              </div>
            </Form.Item>
            <Form.Item
              label="对齐方式"
            >
              <div className="layout-flex-justify">
                <div
                  data-text-align="left"
                  title="左对齐left"
                  className={`layout-flex-justify-item ${textAlign === 'left' && 'active'}`}
                  onClick={this.onTextAlignChange}
                >
                  <Icon type="zuoduiqi" />
                </div>
                <div
                  data-text-align="center"
                  title="center"
                  className={`layout-flex-justify-item ${textAlign === 'center' && 'active'}`}
                  onClick={this.onTextAlignChange}
                >
                  <Icon type="shuipingjuzhong" />
                </div>
                <div
                  data-text-align="right"
                  title="right"
                  className={`layout-flex-justify-item ${textAlign === 'right' && 'active'}`}
                  onClick={this.onTextAlignChange}
                >
                  <Icon type="youduiqi" />
                </div>

                <div
                  data-text-align="justify"
                  title="justify"
                  className={`layout-flex-justify-item ${textAlign === 'justify' && 'active'}`}
                  onClick={this.onTextAlignChange}
                >
                  <Icon type="liangduanduiqi2" />
                </div>
              </div>
              <div className="layout-flex-justify" style={{marginTop: 8}}>
                <div
                  data-vertical-align="baseline"
                  title="父元素基线baseline"
                  className={`layout-flex-justify-item ${verticalAlign === 'baseline' && 'active'}`}
                  onClick={this.onVerticalAlignChange}
                >
                  <Icon type="align-top"/>
                </div>
                <div
                  data-vertical-align="top"
                  title="上对齐top"
                  className={`layout-flex-justify-item ${verticalAlign === 'top' && 'active'}`}
                  onClick={this.onVerticalAlignChange}
                >
                  <Icon type="align-top"/>
                </div>
                <div
                  data-vertical-align="bottom"
                  title="下对齐bottom"
                  className={`layout-flex-justify-item ${verticalAlign === 'bottom' && 'active'}`}
                  onClick={this.onVerticalAlignChange}
                >
                  <Icon type="align-bottom"/>
                </div>
                <div
                  data-vertical-align="center"
                  title="居中对齐center"
                  className={`layout-flex-justify-item ${verticalAlign === 'center' && 'active'}`}
                  onClick={this.onVerticalAlignChange}
                >
                  <Icon type="shuipingjuzhongduiqi"/>
                </div>
              </div>
            </Form.Item>
          </Panel>
          <Panel header="定位" key="position">
            <div className="ant-form-position">
              <Form.Item
                label="定位类型"
              >
                <Select>
                  <Select.Option>无定位static</Select.Option>
                  <Select.Option>相对定位relative</Select.Option>
                  <Select.Option>绝对定位absolute</Select.Option>
                  <Select.Option>固定定位fixed</Select.Option>
                  <Select.Option>黏性定位sticky</Select.Option>
                </Select>
              </Form.Item>
              <div className="position-wrapper">
                <Position />
                <Form.Item
                  label="层叠顺序"
                >
                  <InputNumber />
                </Form.Item>
              </div>
              <Form.Item
                label="浮动方向"
              >
                <div className="layout-display-box">
                  <div
                    className={`layout-display-item ${float === 'none' && 'active'}`}
                    title="不清除none"
                    data-float="none"
                    onClick={this.onFloatChange}
                  >
                    <Icon type="cross-fill" />
                  </div>
                  <div
                    className={`layout-display-item ${float === 'left' && 'active'}`}
                    title="左浮动left"
                    data-float="left"
                    onClick={this.onFloatChange}
                  >
                    <Icon type="zuofudong" />
                  </div>
                  <div
                    className={`layout-display-item ${float === 'right' && 'active'}`}
                    title="右浮动right"
                    data-float="right"
                    onClick={this.onFloatChange}
                  >
                    <Icon type="youfudong"/>
                  </div>
                </div>
              </Form.Item>
              <Form.Item
                label="清除浮动"
              >
                <div className="layout-flex-direction">
                  <div
                    data-clear="none"
                    className={`layout-flex-direction-item ${clear === 'none' && 'active'}`}
                    onClick={this.onClearChange}
                  >
                    不清除
                  </div>
                  <div
                    data-clear="left"
                    className={`layout-flex-direction-item ${clear === 'left' && 'active'}`}
                    onClick={this.onClearChange}
                  >
                    左清除
                  </div>
                  <div
                    data-clear="right"
                    className={`layout-flex-direction-item ${clear === 'right' && 'active'}`}
                    onClick={this.onClearChange}
                  >
                    右清除
                  </div>
                  <div
                    data-clear="both"
                    className={`layout-flex-direction-item ${clear === 'both' && 'active'}`}
                    onClick={this.onClearChange}
                  >
                    左右清除
                  </div>
                </div>
              </Form.Item>
            </div>
          </Panel>
          <Panel header="背景" key="background">
            <Form.Item
              label="背景类型"
            >
              <div className="layout-flex-justify">
                <div
                  data-background-type="color"
                  title="颜色填充"
                  className={`layout-flex-justify-item ${backgroundType === 'color' && 'active'}`}
                  onClick={this.onBackgroundChange}
                >
                  <Icon type="tianchong"/>
                </div>
                <div
                  data-background-type="image"
                  title="背景图片"
                  className={`layout-flex-justify-item ${backgroundType === 'image' && 'active'}`}
                  onClick={this.onBackgroundChange}
                >
                  <Icon type="picture"/>
                </div>
              </div>
            </Form.Item>
            <Form.Item
              colon={false}
              label={
                <React.Fragment>
                  &nbsp;&nbsp;&nbsp;
                  &nbsp;&nbsp;&nbsp;
                  &nbsp;&nbsp;&nbsp;
                  &nbsp;&nbsp;
                </React.Fragment>
              }
            >
              <div className="background-color-box">
                <input type="color" className="color-box" />
                &nbsp;&nbsp;请输入填充的颜色值
              </div>
            </Form.Item>
            <Form.Item
              label={
                <React.Fragment>
                  &nbsp;&nbsp;&nbsp;
                  &nbsp;&nbsp;尺寸
                </React.Fragment>
              }
            >
              <div className="layout-flex-direction">
                <div
                  data-background-size=""
                  className={`layout-flex-direction-item ${backgroundSize === '' && 'active'}`}
                  onClick={this.onBackgroundSizeChange}
                >
                  默认
                </div>
                <div
                  data-background-size="contain"
                  className={`layout-flex-direction-item ${backgroundSize === 'contain' && 'active'}`}
                  onClick={this.onBackgroundSizeChange}
                >
                  等比填充
                </div>
                <div
                  data-background-size="cover"
                  className={`layout-flex-direction-item ${backgroundSize === 'cover' && 'active'}`}
                  onClick={this.onBackgroundSizeChange}
                >
                  等比覆盖
                </div>
              </div>
            </Form.Item>
            <Form.Item
              label={
                <React.Fragment>
                  &nbsp;&nbsp;&nbsp;
                  &nbsp;&nbsp;定位
                </React.Fragment>
              }
            >
              <BackgroundPosition
              />
            </Form.Item>
            <Form.Item
              label="重复显示"
            >
              <div className="layout-flex-justify">
                <div
                  data-background-repeat="repeat"
                  title="垂直方向和水平方向重复repeat"
                  className={`layout-flex-justify-item ${backgroundRepeat === 'repeat' && 'active'}`}
                  onClick={this.onBackgroundRepeatChange}
                >
                  <Icon type="jiugongge"/>
                </div>
                <div
                  data-background-repeat="repeat-x"
                  title="水平方向重复repeat-x"
                  className={`layout-flex-justify-item ${backgroundRepeat === 'repeat-x' && 'active'}`}
                  onClick={this.onBackgroundRepeatChange}
                >
                  <Icon type="hengxiangpailie"/>
                </div>
                <div
                  data-background-repeat="repeat-y"
                  title="垂直方向重复repeat-y"
                  className={`layout-flex-justify-item ${backgroundRepeat === 'repeat-y' && 'active'}`}
                  onClick={this.onBackgroundRepeatChange}
                >
                  <Icon type="zongxiangpailie"/>
                </div>
                <div
                  data-background-repeat="no-repeat"
                  title="不重复no-repeat"
                  className={`layout-flex-justify-item ${backgroundRepeat === 'no-repeat' && 'active'}`}
                  onClick={this.onBackgroundRepeatChange}
                >
                  <Icon type="cross-fill"/>
                </div>
              </div>
            </Form.Item>
          </Panel>
          <Panel header="边框" key="border">
            <Form.Item
              label={
                <React.Fragment>
                  &nbsp;&nbsp;&nbsp;
                  &nbsp;&nbsp;圆角
                </React.Fragment>
              }
            >
              <div className="layout-flex-justify">
                <div
                  data-border-type="circle"
                  title="固定圆角"
                  className={`layout-flex-justify-item ${borderType === 'circle' && 'active'}`}
                  onClick={this.onBorderTypeChange}
                >
                  <Icon type="circle"/>
                </div>
                <div
                  data-border-type="user"
                  title="独立定义"
                  className={`layout-flex-justify-item ${borderType === 'user' && 'active'}`}
                  onClick={this.onBorderTypeChange}
                >
                  <Icon type="bordernone"/>
                </div>
              </div>
            </Form.Item>
            <Form.Item
              colon={false}
              label={
                <React.Fragment>
                  &nbsp;&nbsp;&nbsp;
                  &nbsp;&nbsp;&nbsp;
                  &nbsp;&nbsp;
                  &nbsp;&nbsp;
                </React.Fragment>
              }
            >
              <Slider
                min={0}
                max={100}
                value={borderRadius}
                onChange={this.onBorderRadiusChange}
              />
            </Form.Item>
            <Form.Item
              colon={false}
              label={
                <React.Fragment>
                  &nbsp;&nbsp;&nbsp;
                  &nbsp;&nbsp;&nbsp;
                  &nbsp;&nbsp;
                  &nbsp;&nbsp;
                </React.Fragment>
              }
            >
              <Border
                onChange={this.onBeBorderRadiusChange}
                borderTopLeftRadius={borderTopLeftRadius}
                borderTopRightRadius={borderTopRightRadius}
                borderBottomLeftRadius={borderBottomLeftRadius}
                borderBottomRightRadius={borderBottomRightRadius}
              />
            </Form.Item>
            <Form.Item
              label={
                <React.Fragment>
                  &nbsp;&nbsp;&nbsp;
                  &nbsp;&nbsp;边框
                </React.Fragment>
              }
            >

            </Form.Item>
          </Panel>
        </Collapse>
      </div>
    );
  }
}
